<template>
  <el-card>
    <el-header>确认任务列表信息详情</el-header>
    <el-table :data="tableData" style="width: 100%" stripe>
      <el-table-column label="类别" prop="key" />
      <el-table-column label="详情" prop="value" />
    </el-table>
    <el-divider />
    <!-- 添加分隔线来创建距离 -->
    <div>
      <el-button
        v-if="useResultInfoStoreHook().aqiMeasuredResult.aqimrState === 0"
        @click="handleOpen"
        >填写检测表单</el-button
      >
      <PlusDialogForm
        v-model:visible="visible"
        v-model="values"
        :form="{ columns }"
        :rules="rules"
        width="60%"
        @confirm="handleSubmit"
      />
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { updateAqiMeasuredResult } from "@/api/aqiMeasuredResult";
import { useResultInfoStoreHook } from "@/store/modules/resultInfo";
import { onMounted, ref } from "vue";
import { getAqiGradeByLevel } from "@/api/aqiGrade";
import "plus-pro-components/es/components/dialog-form/style/css";
import {
  type PlusColumn,
  FieldValues,
  PlusDialogForm
} from "plus-pro-components";
import { useRouter } from "vue-router";
import { number } from "echarts";

defineOptions({
  name: "MeasuredInfo"
});

const router = useRouter();

// 定义一个辅助函数，将数字转换为中文
const convertLevelToChinese = (level: number): string => {
  switch (level) {
    case 1:
      return "一级";
    case 2:
      return "二级";
    case 3:
      return "三级";
    case 4:
      return "四级";
    case 5:
      return "五级";
    case 6:
      return "六级";
    default:
      return "";
  }
};

/**根据aqi等级获取aqi信息 */
const getAqiByLevel = async (fbAqiLevel: number) => {
  try {
    const { data } = await getAqiGradeByLevel(fbAqiLevel);
    console.log(data);
    return data;
  } catch (e) {
    console.log(e);
  }
};

const aqi = ref({});

const tableData = ref([
  {
    key: "反馈用户",
    value:
      useResultInfoStoreHook().monitor.monName +
      " " +
      useResultInfoStoreHook().monitor.monTel
  },
  {
    key: "网格",
    value:
      useResultInfoStoreHook().provinceName +
      " " +
      useResultInfoStoreHook().cityName
  },
  {
    key: "详细地址",
    value: useResultInfoStoreHook().aqiMeasuredResult.aqimrAddress
  },
  {
    key: "预估等级",
    value: convertLevelToChinese(
      useResultInfoStoreHook().aqiFeedback.fbAqiLevel
    )
  },
  { key: "信息描述", value: useResultInfoStoreHook().aqiFeedback.fbInfo }
]);

const extraData = ref([
  {
    key: "SO₂浓度",
    value: useResultInfoStoreHook().aqiMeasuredResult.aqimrSo2Value + "ug/m³"
  },
  {
    key: "CO浓度",
    value: useResultInfoStoreHook().aqiMeasuredResult.aqimrCoValue + "ug/m³"
  },
  {
    key: "PM2.5",
    value: useResultInfoStoreHook().aqiMeasuredResult.aqimrPmValue + "ug/m³"
  },
  {
    key: "aqi实际测量等级",
    value:
      convertLevelToChinese(useResultInfoStoreHook().aqiValue) +
      " " +
      useResultInfoStoreHook().aqi.aqiLevelDes
  }
]);

const visible = ref(false);
const values = ref({});

const handleOpen = () => {
  visible.value = true;
};

const rules = {
  name: [
    {
      required: true,
      message: "请输入检测值"
    }
  ]
};

const columns: PlusColumn[] = [
  {
    label: "SO₂浓度(ug/m³)",
    prop: "aqimrSo2Value",
    valueType: "input",
    tooltip: "请输入SO₂浓度",
    labelWidth: 150
  },
  {
    label: "CO浓度(ug/m³)",
    prop: "aqimrCoValue",
    valueType: "input",
    tooltip: "请输入CO浓度",
    labelWidth: 150
  },
  {
    label: "PM2.5(ug/m³)",
    prop: "aqimrPmValue",
    valueType: "input",
    tooltip: "请输入PM2.5",
    labelWidth: 150
  }
];

onMounted(async () => {
  aqi.value = await getAqiByLevel(
    useResultInfoStoreHook().aqiFeedback.fbAqiLevel
  );

  console.log(aqi.value, "aqiLevelDes");
  console.log(aqi.value.aqiLevelDes);
  console.log("onMounted");
  console.log(useResultInfoStoreHook());
  if (useResultInfoStoreHook().aqiMeasuredResult.aqimrState === 1) {
    extraData.value.forEach(item => {
      tableData.value.push(item);
    });
  }
});

//确认提交检测值
const handleSubmit = async () => {
  console.log(values.value);
  const aqiMeasuredResult = useResultInfoStoreHook().aqiMeasuredResult;
  aqiMeasuredResult.aqimrSo2Value = parseFloat(values.value.aqimrSo2Value);
  aqiMeasuredResult.aqimrCoValue = parseFloat(values.value.aqimrCoValue);
  aqiMeasuredResult.aqimrPmValue = parseFloat(values.value.aqimrPmValue);
  console.log(aqiMeasuredResult);
  const num = await updateAqiMeasuredResult({ aqiMeasuredResult });
  console.log(num);
  if (num.code === 200) {
    useResultInfoStoreHook().aqiMeasuredResult.aqimrState = 1;
    router.push("/measuring/index");
  }
};
</script>

<style>
.el-header {
  font-weight: bold;
  color: black;
  font-size: 20px;
  text-align: center;
}
</style>
